<template>
  <div class="page">
    <div class="containerInner">
      <div class="wrapper">
        <div class="header">
          <div class="group">
            <img
                class="iconUser"
                src="../assets/img/img_0.png"
            />
            <span class="chime">Pistachio</span>
          </div>
          <!--          导航栏提取-->
          <Navigation></Navigation>
          <!--          登陆注册栏提取-->
          <LoginBar class="login-bar"></LoginBar>
        </div>
        <div class="search">
          <el-input placeholder="搜索单曲、歌手" v-model="content" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="searchMusic"></el-button>
          </el-input>
        </div>
        <div class="body">
          <div class="front">
            <el-table
                :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                style="width: 100%">
              <el-table-column
                  label="SongName"
                  prop="songName">
              </el-table-column>
              <el-table-column
                  label="Singer"
                  prop="singer">
              </el-table-column>
              <el-table-column
                  align="right">
                <!--              <template slot="header" slot-scope="scope">-->
                <template slot="header">
                  <el-input
                      v-model="search"
                      size="mini"
                      placeholder="输入关键字搜索"/>
                </template>
                <template slot-scope="scope">
                  <!--                  播放单曲-->
                  <el-button
                      size="medium"
                      type="success"
                      @click="playMusic(scope.$index, scope.row)" icon="el-icon-video-play" circle>
                  </el-button>
                  <!--                  收藏单曲-->
                  <el-button
                      size="medium"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)" icon="el-icon-star-off" circle>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!--            分页-->
            <div class="pagination">
              <el-pagination
                  background
                  @current-change="handleCurrentChange"
                  layout="prev, pager, next"
                  :total="tableData.length"
                  :page-size="pageSize"
                  :hide-on-single-page="true">
              </el-pagination>
            </div>
          </div>
          <audio v-bind:src="musicUrl" controls></audio>


        </div>

      </div>
    </div>
  </div>
</template>
<script>
import Navigation from "@/components/Navigation";
import LoginBar from "@/components/LoginBar";

import {exactMatch} from "@/request/api.js"


export default {
  components: {
    Navigation,
    LoginBar,

  },
  mounted() {
    this.content = this.$route.query.content
    if(this.content !=null){
      this.searchMusic()
    }
  },
  data() {
    return {
      content: '',
      // 当前页数，初始为1
      currentPage: 1,
      // 每页的条数
      pageSize: 6,
      tableData: [

      ],
      search: '',
      musicUrl: '',
    }
  },
  methods: {
    playMusic(index, row) {
      console.log(index, row);
      this.musicUrl = row.songUrl
      console.log(this.musicUrl)
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
    },
    searchMusic(){
      // 异步请求后台

      exactMatch({songName: this.content}).then(res =>{

        this.tableData = res.data
        console.log(this.tableData.length);
        console.log(res)
      })

    },
  },


}
</script>

<style src="./css/Search.css" scoped/>
;
